<template>
	<div class="book-type-manage page animate__animated animate__fadeInRight">
		<div class="search-container">
			<div class="left-main">
				<el-form ref="queryFormRef" :model="queryForm" inline>
					<el-form-item label="类别名称：" prop="categoryName">
						<el-input v-model="queryForm.categoryName" placeholder="请输入类别名称"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="right-main">
				<el-button type="info" icon="RefreshRight" @click="handelResetQueryForm(queryFormRef)">重置</el-button>
				<el-button type="primary" icon="Search" @click="handelSearch">搜索</el-button>
			</div>
		</div>
		<div class="option-container">
			<el-button type="primary" icon="Plus" @click="handelAdd">新增</el-button>
			<el-button type="danger" icon="Delete" @click="handelDeleteMore">批量删除</el-button>
		</div>
		<div class="data-container">
			<el-table :data="dataList" stripe style="width: 100%" height="100%" @selection-change="(val) => handleSelectionChange(val, 'categoryId')">
				<el-table-column type="selection" width="55" />
                <el-table-column prop="categoryId" label="编码" align="center" width="55"/>
                <el-table-column prop="categoryName" label="类型名称" align="center" />
                <el-table-column label="操作" align="center" fiexd="right" width="300">
                    <template #default="scope">
						<el-button
                            type="warning"
                            size="small"
                            @click="handelUpdate(scope.row)"
                            >修改</el-button
                        >
                        <el-button
                            type="danger"
                            size="small"
                            @click="handelDelete(scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
		</div>
		<div class="page-container">
			<el-pagination
                v-model:current-page="queryForm.pageNo"
                v-model:page-size="queryForm.pageSize"
                :page-sizes="[5, 10, 15, 20, 30]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalcount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
		</div>
		<!-- 弹框 -->
		<el-dialog
			v-model="dialogConfig.show"
			:title="dialogConfig.title"
			width="500"
			draggable
			append-to-body
		>
			<div class="form-main">
				<el-form v-if="dialogConfig.show" :model="submitForm" ref="submitFormRef" :rules="submitFormRules">
					<el-form-item label="类型名称：" prop="categoryName">
						<el-input v-model="submitForm.categoryName" placeholder="请输入类型名称"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="handelCloseDialog(submitFormRef)">取消</el-button>
					<el-button type="primary" @click="handelSubmitForm(submitFormRef)">
						提交
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
// 引入通用增删改查模块
import { usePagesOption } from '@/hooks/usePagesOption'
import { getBookCategoryByPage, addBookCategory, deleteBookCategory, updateBookCategory} from '@/http/apis/bookTypeManage'
import { ref, onMounted } from 'vue'
// 查询表单
const pageQueryForm = {
	// 图书类别
	categoryName: '',
	// 页码
	pageNo:1,
	// 页大小
	pageSize:15,
}
// 提交表单
const pageSubmitForm = {
	categoryName:''
}
// 提交表单验证规则
const pageSubmitFormRules = {
	categoryName: [
		{ required: true, message: '请输入类型名称', trigger: 'blur' },
	],
}
// 初始化控制模块
const {
	// 查询表单
	queryForm,
	// 查询表单的ref
	queryFormRef,
	// 数据列表
	dataList,
	// 数据总数
	totalcount,
	// 提交表单
	submitForm,
	// 提交表单的REF
	submitFormRef,
	// 提交表单验证规则
	submitFormRules,
	// 弹框配置
	dialogConfig,
	// 重置查询表单
	handelResetQueryForm,
	// 搜索
	handelSearch,
	// 页大小改变
	handleSizeChange,
	// 页码改变
	handleCurrentChange, 
	// 查询数据列表
	featchDataList,
	// 批量删除
	handelDeleteMore,
	// 列表数据选中
	handleSelectionChange,
	// 新增
	handelAdd,
	// 修改
	handelUpdate,
	// 提交表单
	handelSubmitForm,
	// 关闭弹框
	handelCloseDialog,
	// 删除
	handelDelete
} = usePagesOption(
	{
	// 查询表单配置项
	pageQueryForm: pageQueryForm,
	// 提交表单配置项
	pageSubmitForm: pageSubmitForm,
	// 提交表单校验规则
	pageSubmitFormRules: pageSubmitFormRules,
	// 查询数据列表接口
	queryList: getBookCategoryByPage,
	// 新增图书
	addInfo: addBookCategory,
	// 删除图书
	deleteInfo: deleteBookCategory,
	// 修改图书
	updateInfo:updateBookCategory
})
onMounted(() => {
	// 查询数据列表
	featchDataList()
})
</script>